<template>
	<div class="home">
		<div>
			<van-swipe :autoplay="3000" lazy-render>
				<van-swipe-item v-for="image in images" :key="image">
					<img :src="image" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="con">
			<div class="con-wrap" v-for="item1 in homeData" :key="item1.cateId">
				<div class="con-title">{{item1.cateName}}</div>
				<div class="content-wrap">
					<div class="con-content" v-for="item2 in item1.cateData" :key="item2.name" @click="toDetail(item2)">
						<div class="content-name">{{item2.name}}</div>
						<div class="content-img">
							<img :src="item2.img" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<bottom-bar></bottom-bar>
</template>

<script>
	import {getCurrentInstance, reactive, toRefs} from 'vue'
	import router from '../../route/index'
	import http from '../../utils/axios'
	import BottomBar from '../../view/component/BottomBar.vue'

	export default {
		components: {
			'bottom-bar': BottomBar
		},
		setup() {
			const {proxy} = getCurrentInstance()

			const images = [
				'https://i.loli.net/2021/12/03/xw3i8yEzoLDUedf.jpg',
				'https://i.loli.net/2021/12/03/EbFZWiH1RV94OK6.jpg',
				'https://s3.bmp.ovh/imgs/2021/12/fb13e02bfd2383dd.jpg',
				'https://s3.bmp.ovh/imgs/2021/12/f331c7187943665a.jpg',
			];

			const state = reactive({
				homeData: []
			})

			const getHomeData = () => {
				http.get('/homedata').then(res => {
					state.homeData = res.dataList;
					localStorage.setItem('lists', JSON.stringify(res.dataList));
				})
			}
			if (localStorage.getItem('lists')) {
				state.homeData = JSON.parse(localStorage.getItem('lists'))
			} else {
				getHomeData();
			}

			const toDetail = (goods) => {
				if (localStorage.getItem('isLogin')) {
					router.push({
						name: 'Goods',
						params: goods
					})
				} else {
					showToast('请先登录')
					setTimeout(() => {
						router.push('/login')
					}, 500)
				}
			}
			return {
				images,
				...toRefs(state),
				getHomeData,
				toDetail
			};
		},
	}
</script>

<style scoped>
	@media screen and (max-width: 380px) {
		.con-content {
			width: 8rem;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			flex: 1;
		}
	}

	.home {
		height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.van-swipe-item {
		height: 15rem;
	}

	.van-swipe-item img {
		width: 100%;
		height: 100%;
	}

	.con {
		padding-bottom: 50px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.con-wrap {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.con-title {
		width: 100%;
		color: rebeccapurple;
		padding: 0.625rem;
		font-size: 1.375rem;
		margin-left: 0.625rem;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		margin-bottom: 0.625rem;
	}

	.content-wrap {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0.625rem 0.9375rem;
	}

	.con-content {
		width: 8rem;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex: 1;
	}

	.content-name {
		width: 6.25rem;
		font-size: 0.875rem;
		color: #ccc;
		padding: 0.625rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.content-img {
		width: 6.25rem;
		height: 6.25rem;
	}

	.content-img img {
		width: 100%;
		height: 100%;
	}
</style>